Библиотека JQuery UI (User Interface) 2018
В данном видео я хотел бы представить Вашему вниманию новый премиум курс от нашей команды по изучению библиотеки JQuery UI.
Как Вы знаете, не так давно на нашем сайте был опубликован ряд уроков о достаточно популярной в данное время библиотеке jQuery и, по сути, текущий цикл уроков – это его логическое продолжение. Потому как библиотека jQuery UI – это часть глобального проекта под названием jQuery, которая в значительной степени расширяет стандартный функционал указанной библиотеки.
User Interface – это пользовательский интерфейс, а значит функционал указанного мини-фрейморка направлен на формирование различных элементов как раз-таки пользовательского интерфейса, под которым, как правило, понимают некие элементы взаимодействия человека и веб-страницы. Это могут быть различные кнопки, динамические меню, скролл и прогресс бары, всевозможные виджеты и интерактивные элементы и, конечно же, различные анимационные эффекты, которые хоть и не связаны с каким-то управлением или взаимодействием, но все же возникают как следствие срабатывания какого-либо события.
Определенный набор элементов, которые наиболее часто используются и могли быть созданы вручную с использованием jQuery нам предлагает библиотека jQuery UI в уже готовом и удобном виде.
Поэтому в данном курсе мы с Вами будем учиться создавать элементы пользовательского интерфейса, используя вышеуказанную библиотеку.


Урок 1. Библиотека JQuery UI (User Interface). Введение:
От автора: приветствую Вас в первом видео курса по изучению библиотеки jQuery UI (User Interface). Не так давно на нашем сайте был опубликован ряд уроков о достаточно популярной в данное время библиотеке jQuery и, по сути, текущий цикл уроков – это его логическое продолжение.
Потому как библиотека jQuery UI это часть глобального проекта под названием jQuery, которая в значительной степени расширяет стандартный функционал указанного фреймворка и позволяет буквально за считанные минуты создавать различные элементы пользовательского интерфейса, что, собственно, мы и будем изучать. При этом в текущем уроке Вы:
Узнаете, как скачать и установить библиотеку jQuery UI?
Как выбрать, или сгенерировать шаблон для скачиваемой библиотеки?
Что такое виджет аккордеон и как ввести его в работу?
Как сформировать выпадающее многоуровневое меню, на основе текущего виджета.


Урок 2. Библиотека JQuery UI (User Interface). Виджет аккордеон:
От автора: в данном уроке мы продолжаем рассматривать, начатый на прошлом занятии материал, а именно виджет библиотеки jQuery UI (User Interface) – аккордеон. При этом как с ним работать и как вызывать его на исполнение – было рассмотрено на прошлом видео и сегодня мы разберем все основные свойства, методы и события.
По итогам урока Вы:
Узнаете, что такое опции и как с их помощью изменить поведение виджета?
Узнаете, что такое методы и как с их помощью выполнить некоторые действия?
Научитесь обрабатывать события виджета аккордеон.
Познакомитесь с очередным виджетом Autocomplete, который подробно будет рассматриваться на следующем уроке.


Урок 3. Основы JQuery UI. Виджет Autocomplete:
От автора: в данном уроке мы с Вами будем говорить о HTML формах, а если точнее, о элементе формы, который предназначен, для ввода небольшого участка текста. При этом, если данный элемент используется для ввода определенных поисковых запросов, то очень удобно, если еще на этапе набора текста, пользователю будет предложен в виде выпадающего списка, определенный набор вариантов для выбора. Как раз данный эффект и реализует виджет библиотеки jQueryUI – Autocomplete.
По итогам данного урока Вы научитесь работать с вышеуказанным виджетом, узнаете в каком виде необходимо формировать данные для отображения в блоке вариантов. А также, как осуществить асинхронный запрос для получения списка вариантов непосредственно с сервера.


Урок 4. Библиотека jQuery UI (User Interface). Виджеты Button и Checkboxradio:
От автора: напомню, что на предыдущем уроке мы с Вами рассмотрели виджет Autocomplete, который по сути добавляет на страницу дополнительный блок с вариантами на выбор. Это означает, что возникает вопрос о его позиционировании относительно других элементом веб-страницы. Поэтому в данном уроке мы поговорим по данной теме, а также рассмотрим два простых виджета Button и Checkboxradio.
По итогам данного урока Вы узнаете, по каким принципам осуществляется позиционирование элементов в библиотеке jQuery UI и какие параметры можно использовать для его настройки. А также Вы научитесь быстро и легко стилизировать кнопки, чекбоксы и радиоэлементы, используя вышеуказанные виджеты.


Урок 5. Библиотека jQuery UI (User Interface). Виджет Datepicker:
От автора: в данном уроке мы с Вами будем говорить о датах, добавление которых осуществляется на достаточно большом количестве различных ресурсов. А так как дата, это довольно сложная строка с точки зрения форматирования и обработки на сервере, то предоставлять пользователю возможность самостоятельно вводить ее в виде строки, не совсем хорошо и даже, я бы сказал неправильно.
Поэтому в данном видео мы с Вами будем изучать виджет Datepicker, с помощью которого на странице для ввода даты, можно будет отобразить небольшой календарик, в котором пользователь выберет интересующую дату и таким образом добавит ее в необходимое текстовое поле формы.
По итогам данного урока, Вы научитесь отображать на странице календарь для выбора даты, познакомитесь с доступными параметрами его настройки и узнаете, как расширить стандартный функционал виджта, и добавить возможность выбора диапазона дат.


Урок 6. Библиотека jQuery UI (User Interface). Виджеты Menu и Dialog:
От автора: в текущем видео мы разберем два не сложных, но очень полезных виджета. Первый из них – это инструмент по формированию выпадающего многоуровневого меню, что очень актуально для любого сайта. И второй – это виджет по созданию и выводу на экран диалоговых окон с абсолютно произвольным содержимым.
По итогам данного урока, Вы научитесь создавать и выводить на экран многоуровневые выпадающие меню, причем как вертикальные, так и горизонтальные, а также различные диалоговые окна.


Урок 7. Библиотека JQuery UI (User Interface). Виджет Slider:
От автора: достаточно часто на некоторых страницах проекта, необходимо предоставлять пользователю возможность выбора одного из предложенных вариантов для последующей обработки. Конечно, в этом случае, идеальный вариант заключается в использовании стандартного и очень простого тега select. Но, согласитесь, что хоть это и удобно, но визуально довольно обыденно и не совсем эффектно.
Поэтому в данном уроке мы рассмотрим с Вами виджет Slider, который формирует горизонтальный или вертикальный ползунок, при помощи которого можно задать требуемое значение, или же диапазон значений.
По итогам данного урока Вы изучите виджет Slider, на примере реализации заготовки пользовательского интерфейса фильтра по цене, для интернет-магазина.
Таким образом, Вы увидите, какие необходимо произвести настройки, что бы можно было выбирать диапазон значений, а также какие события использовать, для визуального отображения выбранных вариантов в специальных полях.


Урок 8. Библиотека JQuery UI (User Interface). Виджеты Tabs и Tooltip:
От автора: в данном уроке мы с Вами познакомимся с двумя довольно полезными виджетами. Первый, под названием Tabs – это виджет, который позволяет значительно экономить свободное пространство на страницах сайта, так как позволяет отображать контент в виде своеобразных вкладок. И второй – Tooltip, виджет благодаря которому можно быстро и легко сформировать всплывающие подсказки для требуемых элементов проекта.
По итогам данного урока, Вы научитесь отображать контент сайта в виде вкладок, а также выводить красивые подсказки, используя стандартные атрибуты HTML элементов.


Урок 9. Библиотека JQuery UI (User Interface). Виджет Progressbar:
От автора: довольно часто веб-приложения выполняют довольно сложные и время затратные операции, такие как копирование файлов, развертывание приложения, или же некоторые задачи, которые выполняются поэтапно.
При этом, конечно же, желательно информировать пользователя об этом, а лучше, используя пользовательский интерфейс, показывать динамику хода выполнения процесса, что бы он мог оценить требуемое время и примерное количество выполненных задач.
Другими словами, отображать на экране процентное соотношение законченных операций, а лучше визуальный progressbar, что, собственно, мы с Вами и сделаем, используя одноименный виджет библиотеки jQuery UI.
По итогам данного урока Вы научитесь отображать такой элемент как progressbar, изучите его основные свойства, методы и доступные события. А также мы с Вами сымитируем взаимодействие между FrontEnd и BackEnd, путем запуска и выполнения на сервере достаточно сложной задачи и показа на экране процесса выполнения в виде прогрессбара.


Урок 10. Библиотека JQuery UI (User Interface). Виджеты Selectmenu и Spinner:
От автора: стилизация стандартного html тега select, который используется практически на каждом сайте, довольно востребованная задача на текущий момент времени, так как его визуальное оформление, хоть и не очень плохое, но довольно привычное и часто не вписывается в дизайн страницы.
Поэтому в данном уроке мы с Вами научимся оформлять указанный элемент средствами библиотеки jQueryUI, используя специальный виджет Selectmenu, который буквально превращает выпадающий список в полноценное меню.
Так же сегодня мы рассмотрим виджет Spinner, который значительно облегчает выбор числовых значений для пользователей. Суть, которого заключается в том, что на экране возле текстового поля ввода, отображается две кнопочки, используя которые, можно увеличивать или же уменьшать значения.


Урок 11. Библиотека JQuery UI (User Interface). Сортировка элементов:
От автора: на текущий момент мы с Вами рассмотрели все доступные виджеты, а значит пришло время, перейти к следующему разделу библиотеки JQueryUI, под названием interactions, в котором, сосредоточены инструменты, реализующие различные, интересные взаимодействия между элементами html страниц. Непосредственно в этом уроке мы изучим одного представителя указанного раздела, который именуется как sortable. И по сути – это интерфейс визуальной сортировки элементов, путем их перетаскивания, со старых позиций на — новые.
По итогам данного урока Вы научитесь сортировать элементы, используя простое «перетаскивание», при этом, как всегда, мы рассмотрим все доступные настройки, методы и события. А так же на стороне сервера реализуем сохранение результатов сортировки, что бы после перезагрузки страницы – сортируемые элементы не вернулись на свои прежние места.


Урок 12. Библиотека JQuery UI (User Interface). Инструменты Selectable и Resizable:
От автора: современные html элементы – содержат множество интерактивных элементов, то есть тех элементов, которые определенным образом отвечают на действие пользователя, и как Вы заметили, в этом мини курсе, мы как раз рассматриваем и изучаем, те инструменты, которые облегчают создание вышеуказанных элементов.
Сегодня мы познакомимся с двумя простыми, но очень полезными интерфейсами. Первый – это метод sortable, благодаря которому очень просто реализовать выделение произвольных элементов и привязку к этому эффекту различных событий. И второй – Resizable, который описывает функционал изменения размеров элементов. По итогам данного урока мы с Вами рассмотрим доступные настройки, методы и события, указанных выше инструментов.


Урок 13. Библиотека JQuery UI (User Interface). Создание собственного виджета:
От автора: на данном этапе по разделу interactions нам осталось рассмотреть всего лишь два инструмента. И поэтому в этом уроке я предлагаю немного отклониться от этой темы и поговорить о том, как можно создать собственный виджет для библиотеки jQueryUI. При этом, в базовой комплектации присутствует множество различных инструментов – это наиболее используемые виджеты.
Как это часто бывает, всегда требуется что-то доработать, изменить или вообще написать с нуля, так как при создании сайтов, задачи, которые ставятся перед программистами самые различные и, порой, не типовые.
Поэтом сегодня мы познакомимся с таким элементом как widget factory – это своеобразная «фабрика» виджетов. То есть некий набор свойств и методов, которые Вы можете использовать, как конструктор при создании своего собственного решения.


Урок 14. Библиотека JQuery UI (User Interface). Инструмент Draggable:
От автора: в комплекте ядра библиотеки jQueryUI, непосредственно в категории interactions остались еще два не рассмотренных нами инструмента Draggable и Dropable, которые, ввиду специфики своего функционала, как правило, используются в паре.
Поэтому в данном уроке мы с Вами рассмотрим первый из них, который реализует функционал перетаскивания, или перемещения элементов на странице. Потому как Вы должны представлять его возможности, и понимать, какие параметры можно использовать для настройки. А в следующем уроке мы будем рассматривать уже связанную работу интерфейсов Draggable и Dropable библиотеки jQueryUI.
По итогам данного урока, Вы научитесь создавать перетаскиваемые элементы на странице, а также познакомитесь с доступными параметрами для настройки и событиями, которые позволят Вам определить функции обработчики.


Урок 15. Библиотека jQuery UI (User Interface). Инструмент Droppable:
От автора: на прошлом уроке мы с Вами рассмотрели элемент категории «Взаимодействия» – draggable, который, используется в паре с другим инструментом. Так как само по себе перетаскивание элементов, без их последующей обработки, абсолютно бесполезно.
Сегодня мы изучим элемент под названием Droppable, который реализует функционал приема перетаскиваемых элементов. Это последний доступный инструмент взаимодействий в библиотеке jQuery UI.
По итогам данного урока Вы научитесь принимать перетаскиваемые элементы при помощи инструмента droppable. Узнаете, какие события при этом срабатывают, какие данные передаются в функции обработчики и какие параметры доступны для конфигурирования инструмента.


Урок 16. Библиотека jQuery UI (User Interface). Effects:
От автора: вот и подошел к концу курс по изучению библиотеки JQuery UI. Мы с Вами рассмотрели все доступные виджеты и инструменты взаимодействий, познакомились с вариантами их применения, настройки, а также изучили доступные события, для которых можно регистрировать функции обработчики.
Но несколько методов мы с Вами все же упустили, а именно методы по добавлению различных анимационных эффектов к некоторым стандартным действиям. Поэтому в данном уроке мы с Вами рассмотрим методы из категории «Effects».
По итогам данного урока Вы научитесь применять различные анимационные эффекты для таких действий как добавление класса, скрытие и появление элементов, смена цвета элемента и многие другие.